/* eslint-disable no-unused-vars */
import React, { Component } from 'react'
import { connect } from 'react-redux'

import { Form, Input, Button, message } from 'antd'
import { createFromIconfontCN } from '@ant-design/icons'

// 导入登陆数据类型描述和接口
import { LoginReqArguInterface, loginAction } from '@/reducer/auth'

import './style.less'

const baseUrl = process.env.REACT_APP_SAPI

// 图标
const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_3113882_68d8d5dipp.js',
})

interface IState {
  origin: string
  captchaTime: number
}

interface IProps {
  [paramName: string]: any
}

class Login extends Component<IProps, IState> {
  constructor(props: IProps, public state: IState) {
    super(props)
    this.state = {
      ...props.location.state,
      captchaTime: Date.now(),
    }
  }

  onFinish = (values: LoginReqArguInterface): void => {
    const { loginAction, history } = this.props
    // 派发登陆请求
    loginAction(values)
      .then((res: any) => {
        if (res.token) {
          message.success('登陆成功', 1, () => {
            // 如果状态中包含有来源页，跳转到来源页，否则跳转到首页
            history.replace(this.state.origin ? this.state.origin : '/home')
          })
        }
      })
      .catch((err: any) => {
        this.changeCaptcha()
        return Promise.reject()
      })
  }

  onFinishFailed = (errorInfo: any) => {
    console.log('校验失败:', errorInfo)
  }

  changeCaptcha = () => {
    this.setState({
      captchaTime: Date.now(),
    })
  }

  render() {
    return (
      <div className="docwrap login">
        <div className="login-wrap">
          <div className="logo"></div>
          <Form
            className="form"
            name="basic"
            initialValues={{ remember: true }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
          >
            <Form.Item
              name="account"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input
                prefix={<IconFont type="icon-account" />}
                autoComplete="new-password"
              />
            </Form.Item>

            <Form.Item
              name="pwd"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password
                prefix={<IconFont type="icon-password" />}
                autoComplete="new-password"
              />
            </Form.Item>
            <div className="captcha-wrap">
              <Form.Item
                name="imgcode"
                rules={[{ required: true, message: '请输入验证码!' }]}
              >
                <Input
                  prefix={<IconFont type="icon-captcha" />}
                  autoComplete="new-password"
                />
              </Form.Item>
              <img
                onClick={this.changeCaptcha}
                src={`${baseUrl}/adminapi/captcha_pro?${this.state.captchaTime}`}
                alt="pictrue"
              />
            </div>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                登陆
              </Button>
            </Form.Item>
            {/* <Form.Item name="remember" valuePropName="checked">
              <Checkbox>记住我</Checkbox>
            </Form.Item> */}
          </Form>
        </div>
      </div>
    )
  }
}
export default connect(
  (store: any) => {
    return {
      authInfo: store.authInfo,
    }
  },
  { loginAction }
)(Login)
